<template>
    <div>
      <h2>水果列表</h2>
      <ul>
        <!-- 使用 v-for 遍历 fruits 数组 -->
        <li v-for="(fruit, index) in fruits" :key="index">
          {{ index + 1 }}. {{ fruit }}
        </li>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 定义一个包含水果名称的数组
  const fruits = ref(['苹果', '香蕉', '橙子', '葡萄']);
  </script>